<template>
  <div class="menu-section">
    <div class="section-header" @click="toggleCollapsed">
      <span class="section-title">通用设置</span>
      <a-icon :type="collapsed ? 'down' : 'up'" />
    </div>
    <div v-show="!collapsed" class="menu-items">
      <!-- 组节点遍历对象选择框（通用变量输入框） -->
      <div class="config-item" v-if="nodeType === 'group'">
        <label class="config-label">遍历对象</label>
        <VariableRichTextEditor
          v-model="traverseObjectProxy"
          :availableVariables="availableVariables"
          :inputVariables="inputVariables"
          placeholder="请输入遍历对象变量"
          style="width: 100%"
        />
      </div>
      <!-- HTTP配置 -->
      <HttpConfigSection 
        :nodeType="nodeType"
        :httpConfig="httpConfig"
        :availableVariables="availableVariables"
        :inputVariables="inputVariables"
        @add-header="addHeader"
        @remove-header="removeHeader"
        @add-form-field="addFormField"
        @remove-form-field="removeFormField"
        @update:httpConfig="onHttpConfigUpdate"
      />
      
      <!-- 判断节点设置 -->
      <template v-if="nodeType === 'judge'">
        <!-- 判断条件列表 -->
        <div class="judge-conditions">
          <div class="condition-header">
            <label class="config-label">判断条件</label>
            <a-button 
              type="link" 
              size="small" 
              @click="addJudgeCondition"
              style="padding: 0; height: auto;"
            >
              <a-icon type="plus" /> 添加条件
            </a-button>
          </div>
          
          <div 
            v-for="(condition, index) in judgeConditions" 
            :key="index" 
            class="condition-item"
          >
            <div class="condition-content">
              <div class="condition-field">
                <div class="field-header">
                  <label class="field-label">脚本</label>
                  <a-button 
                    type="link" 
                    size="small" 
                    @click="removeJudgeCondition(index)"
                    class="delete-btn"
                  >
                    <a-icon type="delete" />
                  </a-button>
                </div>
                <VariableRichTextEditor
                  :value="condition.script"
                  placeholder="请输入判断脚本"
                  :availableVariables="availableVariables"
                  :inputVariables="inputVariables"
                  :multiline="true"
                  style="width: 100%;"
                  @input="(value) => updateJudgeCondition(index, { script: value })"
                />
              </div>
              
              <div class="condition-field">
                <label class="field-label">目标节点</label>
                <a-select
                  :value="condition.targetNodeId"
                  placeholder="选择目标节点"
                  style="width: 100%"
                  size="small"
                  @change="(value) => updateJudgeCondition(index, { targetNodeId: value })"
                >
                  <a-select-option 
                    v-for="node in directlyConnectedNodes" 
                    :key="node.id" 
                    :value="node.id"
                  >
                    {{ node.label }}
                  </a-select-option>
                </a-select>
                <div class="field-desc">当条件满足时执行的节点</div>
              </div>
              

            </div>
          </div>
          
          <!-- 默认节点 -->
          <div class="config-item">
            <label class="config-label">else节点</label>
            <a-select
              :value="defaultNodeId"
              placeholder="选择默认节点"
              style="width: 100%"
              size="small"
              @change="onDefaultNodeChange"
            >
              <a-select-option 
                v-for="node in directlyConnectedNodes" 
                :key="node.id" 
                :value="node.id"
              >
                {{ node.label }}
              </a-select-option>
            </a-select>
            <div class="field-desc">当所有条件都不满足时执行的节点</div>
          </div>
          
          <!-- 结束节点 -->
          <div class="config-item">
            <label class="config-label">结束节点</label>
            <a-select
              :value="endNodeId"
              placeholder="选择结束节点"
              style="width: 100%"
              size="small"
              @change="onEndNodeChange"
            >
              <a-select-option 
                v-for="node in filteredEndNodes" 
                :key="node.id" 
                :value="node.id"
              >
                {{ node.label }}
              </a-select-option>
            </a-select>
            <div class="field-desc">固定的流程结束节点</div>
          </div>
          
          <!-- 使用说明 -->
          <div class="usage-tips">
            <div class="tips-title">使用说明：</div>
            <div class="tips-list">
              <div>• 可以添加多个判断条件，按顺序执行</div>
              <div>• 当某个条件满足时，会跳转到对应的目标节点</div>
              <div>• 如果所有条件都不满足，会跳转到默认节点</div>
              <div>• 结束节点是固定的流程结束点，不能是目标节点或else节点</div>
            </div>
          </div>
        </div>
      </template>
      
      <!-- 非判断节点的通用设置 -->
      <template v-else>
        <!-- 多行文本输入框 -->
        <div class="config-item">
          <label class="config-label">脚本内容</label>
          <VariableRichTextEditor
            :value="scriptContent"
            placeholder="请输入脚本内容，支持变量插入"
            :availableVariables="availableVariables"
            :inputVariables="inputVariables"
            :multiline="true"
            style="width: 100%; min-height: 120px;"
            @input="onScriptContentChange"
          />
        </div>
        
        <div class="config-item">
          <label class="config-label">超时时间(秒)</label>
          <a-input-number
            :value="timeout"
            placeholder="30"
            style="width: 100%"
            size="small"
            :min="1"
            :max="3600"
            @change="onTimeoutChange"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import HttpConfigSection from './HttpConfigSection.vue'
import VariableRichTextEditor from './VariableRichTextEditor.vue'

export default {
  name: 'GeneralSettingsSection',
  components: { HttpConfigSection, VariableRichTextEditor },
  props: {
    nodeType: {
      type: String,
      default: ''
    },
    httpConfig: {
      type: Object,
      default: () => ({
        method: 'GET',
        url: '',
        headers: [],
        body: '',
        formData: [],
        traverseObject: ''
      })
    },
    scriptContent: {
      type: String,
      default: ''
    },
    timeout: {
      type: Number,
      default: 30
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    availableVariables: {
      type: Array,
      default: () => []
    },
    inputVariables: {
      type: Array,
      default: () => []
    },
    judgeConditions: {
      type: Array,
      default: () => []
    },
    defaultNodeId: {
      type: String,
      default: ''
    },
    endNodeId: {
      type: String,
      default: ''
    },
    availableNodes: {
      type: Array,
      default: () => []
    },
    directlyConnectedNodes: {
      type: Array,
      default: () => []
    },
    subsequentNodes: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    traverseObjectProxy: {
      get() {
        return this.httpConfig.traverseObject || ''
      },
      set(val) {
        this.$emit('update:httpConfig', { ...this.httpConfig, traverseObject: val })
      }
    }
  },
  methods: {
    toggleCollapsed() {
      this.$emit('toggle-collapsed')
    },
    

    
    onTimeoutChange(value) {
      this.$emit('update:timeout', value)
    },
    
    addHeader() {
      this.$emit('add-header')
    },
    
    removeHeader(index) {
      this.$emit('remove-header', index)
    },
    
    addFormField() {
      this.$emit('add-form-field')
    },
    
    removeFormField(index) {
      this.$emit('remove-form-field', index)
    },
    
    onHttpConfigUpdate(event) {

      this.$emit('update:httpConfig', event)
    },

    onScriptContentChange(value) {
      this.$emit('update:scriptContent', value)
    },

    onTraverseObjectChange(val) {
      this.$emit('update:httpConfig', { ...this.httpConfig, traverseObject: val })
    },
    
    // 判断节点相关方法
    addJudgeCondition() {
      this.$emit('add-judge-condition')
    },
    
    removeJudgeCondition(index) {
      this.$emit('remove-judge-condition', index)
    },
    
    updateJudgeCondition(index, updates) {
      this.$emit('update-judge-condition', index, updates)
    },
    
    onDefaultNodeChange(value) {
      this.$emit('update:defaultNodeId', value)
    },
    
    onEndNodeChange(value) {
      this.$emit('update:endNodeId', value)
    }
  },
  computed: {
    // 过滤结束节点选项，排除目标节点和else节点
    filteredEndNodes() {
      if (!this.subsequentNodes || this.subsequentNodes.length === 0) {
        return []
      }
      
      // 获取所有目标节点ID
      const allTargetNodeIds = this.judgeConditions.map(condition => condition.targetNodeId)
      
      // 过滤掉目标节点和else节点
      return this.subsequentNodes.filter(node => {
        return !allTargetNodeIds.includes(node.id) && node.id !== this.defaultNodeId
      })
    }
  }
}
</script>

<style scoped>
.menu-section {
  padding: 4px 0;
}

.menu-section:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  padding: 4px 12px;
  font-size: 11px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  cursor: pointer;
  background: #fafafa;
  transition: background-color 0.2s;
}

.section-header:hover {
  background: #f0f0f0;
}

.section-header .section-title {
  padding: 0;
  margin: 0;
}

.menu-items {
  padding: 8px 12px;
}

.config-item {
  margin-bottom: 8px;
}

.config-item:last-child {
  margin-bottom: 0;
}

.config-label {
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

/* 判断节点样式 */
.judge-conditions {
  margin-top: 6px;
}

.condition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.condition-item {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  background: #fafafa;
}

.condition-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.condition-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.field-label {
  font-size: 11px;
  color: #666;
  font-weight: 500;
  margin-bottom: 2px;
}

.field-desc {
  font-size: 10px;
  color: #999;
  margin-top: 1px;
}

.field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.delete-btn {
  padding: 0 !important;
  height: auto !important;
  color: #ff4d4f !important;
  font-size: 12px !important;
}

.delete-btn:hover {
  color: #ff7875 !important;
}

.usage-tips {
  margin-top: 16px;
  padding: 12px;
  background: #f6f8fa;
  border-radius: 4px;
  border-left: 3px solid #1890ff;
}

.tips-title {
  font-size: 11px;
  color: #666;
  font-weight: 500;
  margin-bottom: 8px;
}

.tips-list {
  font-size: 10px;
  color: #666;
  line-height: 1.5;
}

.tips-list > div {
  margin-bottom: 4px;
}
</style> 